﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页--伯虎云系统2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="${s.base}/js/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="${s.base}/css/base/public.css" media="all" />
    <style type="text/css">
     .team{width: 100%; clear:both;}
		 .team ul{width: 38%; height: 90px;padding: 2px 5%; margin: 5px 1%; background-color: rgba(0,0,0,0.5);border-radius: 10px;float:left;}
		 .team_top{ width: 88%; height: 120px;padding: 5px 5%; margin: 5px 3px; background-color: rgba(0,0,0,0.5);border-radius: 10px;}
		 .team_top table{width: 100%; height: 120px;}
		 .team_top table tr td{line-height: 40px;font-size: 20px;color: #ffffff; }
		 .team_top table tr .team_top_time{line-height: 20px;font-size: 15px;color: #ffffff;}
		 .team_top table tr .team_top_value{line-height: 80px;font-size: 70px;color:#9AFC02;}
		 .setCity,.addDevice{cursor: pointer;}
                 .deleteDevice
                 .team1{width: 100%; clear:both;}
                 .team1 ul{width: 38%; height: 90px;padding: 2px 5%; margin: 5px 1%; background-color: rgba(0,0,0,0.5);border-radius: 10px;float:left;}
                 .team1 ul li{float: left;opacity:1;}
		 .team1 ul .show_cs{width: 40%;height: 90%;}
		 .team1 ul .show_cs img{height: 52px;}
		 .team1 ul .show_cs div{width: 100%;line-height: 15px;font-size: 15px;color: #ffffff;text-align: left;}
		 .team1 ul .show_cs .show_cs_top{padding-top: 5px;color: #000000;text-align: center;}
		 .team1 ul .show_cs .show_cs_bottom{padding-bottom: 5px;font-size: 10px;color: #000000;text-align: center;}
		 .team1 ul .show_cs .show_value{text-align: center;font-size: 36px;color:#ffffff;font-weight: bold;line-height: 60px;}
		 .team1 ul .show_cs .show_result{text-align: center; font-size: 12px;font-weight: bold;color:#003300; line-height: 10px;
		 .changeSelect{position:absolute;top:13px; right:20px; height:28px; border-radius:5px; font-size:16px; color:#999;}



		/**
        *弹窗页面
        */
		.ysq_alert{
			width:90%;
			margin-left: 10%;
			height:180px;
			padding: 20px 0px;
			background: #5F5F73;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius:10px;
			-moz-border-radius:10px;
			text-align: center;
		}
		.ysq_alert li{
			height: 55px;
			line-height: 55px;
			font-size: 28px;
			color: #FFFFFF;
		}
		.ysq_alert .alert_btn div{
			float: left;
			width: 50%;
		}
		.ysq_alert .alert_btn_left{
			text-align: right;
		}
		.ysq_alert .alert_btn_right{
			text-align: left;
		}
		.ysq_alert .alert_btn input{
			padding: 5px;
			font-size: 28px;
			color: #000000;
			margin: 10px 20px;
			border-radius:10px;
			-moz-border-radius:10px;
		}


    </style>
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote layui-bg-green">
		<div><span  id="nowTime"></span><div style="float:right;" class="addDevice">添加设备</div></div>
	</blockquote>
	

	<div class="layui-row layui-col-space10">

        <#list deviceList as deviceProduct>
    	<!--开始-->
		<div class="layui-col-lg4 layui-col-md12">
			<blockquote class="layui-elem-quote title">${deviceProduct.name}
            	<li style="float:right; margin-right: 5px;" class="setCity" data-title="${deviceProduct.name}" data-deviceId="${deviceProduct.deviceId}">设置</li>
                
		<li style="float:right; margin-right: 5px;" class="deleteDevice" data-title="${deviceProduct.name}" data-deviceId="${deviceProduct.id}">删除</li>
            </blockquote>
			<table class="layui-table magt0">
				<colgroup>
					<col width="150">
					<col>
				</colgroup>
				<tbody>
				<tr>
					<td style="border-bottom:0px;">
                    	<div>
							<div class="team1">
						               <#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">

									<ul style="background-color:${deviceProduct.newProduct.aqiColor};" data-code="AQI">
										<li  class="show_cs" >

											<img src="${s.base}/mobile/img/i11.png" width=90% height=90%/>
											<div class="show_cs_top">AQI</div>
											<div class="show_cs_bottom"></div>
										</li>

										<li  class="show_cs" >
											<div class="show_value">${deviceProduct.newProduct.aqi}</div>
											<div class="show_result">${deviceProduct.newProduct.aqiTip}</div>
										</li>

									</ul>


								</#if>
							       <#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
									<ul style="background-color:${deviceProduct.newProduct.pm2Color};" data-code="PM2" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i25.png" width=90% height=90%/>
											<div class="show_cs_top">PM25</div>
											<div class="show_cs_bottom">ug/m³</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.pm2}</div>
											<div class="show_result">${deviceProduct.newProduct.pm2Tip}</div>
										</li>

									</ul>
								</#if>
								<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
									<ul style="background-color:${deviceProduct.newProduct.pm1Color};" data-code="PM1" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i9.png" width=90% height=90%/>
											<div class="show_cs_top">PM1</div>
											<div class="show_cs_bottom">ug/m³</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.pm1}</div>
											<div class="show_result">${deviceProduct.newProduct.pm1Tip}</div>
										</li>

									</ul>
								</#if>
								<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="14"||deviceProduct.type=="15"||deviceProduct.type=="16"||deviceProduct.type=="18">
									<ul data-code="PM10"  style="background-color:${deviceProduct.newProduct.pm10Color};">
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i10.png" width=90% height=90%/>
											<div class="show_cs_top">PM10</div>
											<div class="show_cs_bottom">ug/m³</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.pm10}</div>
											<div class="show_result">${deviceProduct.newProduct.pm10Tip}</div>
										</li>
									</ul>
								</#if>
									<#if deviceProduct.type=="1"||deviceProduct.type=="3"||deviceProduct.type=="2"||deviceProduct.type=="7"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="13"||deviceProduct.type=="15">
									<ul data-code="HCHO"  style="background-color:${deviceProduct.newProduct.hchoColor};" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i4.png" width=90% height=90%/>
											<div class="show_cs_top">HCHO</div>
											<div class="show_cs_bottom">mg/m³</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.hcho}</div>
											<div class="show_result">${deviceProduct.newProduct.hchoTip}</div>
										</li>
									</ul>
								</#if>
								<#if deviceProduct.type=="9"||deviceProduct.type=="10">
									<ul data-code="O2"  style="background-color:${deviceProduct.newProduct.o2Color};" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i4.png" width=90% height=90%/>
											<div class="show_cs_top">O2</div>
											<div class="show_cs_bottom">%</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.o2}</div>
											<div class="show_result">${deviceProduct.newProduct.o2Tip}</div>
										</li>
									</ul>
								</#if>
							<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="8"||deviceProduct.type=="10"||deviceProduct.type=="14">
									<ul data-code="CO2"  style="background-color:${deviceProduct.newProduct.co2Color};" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i5.png" width=90% height=90%/>
											<div class="show_cs_top">CO2</div>
											<div class="show_cs_bottom">ppm</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.co2}</div>
											<div class="show_result">${deviceProduct.newProduct.co2Tip}</div>
										</li>
									</ul>
								</#if>
								<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="8"||deviceProduct.type=="9"||deviceProduct.type=="10"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="13"||deviceProduct.type=="17"||deviceProduct.type=="18">
									<ul data-code="TEMP"  style="background-color:${deviceProduct.newProduct.temrColor};" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i0.png" width=90% height=90%/>
											<div class="show_cs_top">温度</div>
											<div class="show_cs_bottom">℃</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.temr}</div>
											<div class="show_result">${deviceProduct.newProduct.temrTip}</div>
										</li>
									</ul>
								</#if>
								<#if deviceProduct.type=="1"||deviceProduct.type=="2"||deviceProduct.type=="3"||deviceProduct.type=="4"||deviceProduct.type=="5"||deviceProduct.type=="6"||deviceProduct.type=="7"||deviceProduct.type=="8"||deviceProduct.type=="9"||deviceProduct.type=="10"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="13"||deviceProduct.type=="17"||deviceProduct.type=="18">
									<ul data-code="HUM" style="background-color:${deviceProduct.newProduct.himColor};" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i1.png" width=90% height=90%/>
											<div class="show_cs_top">湿度</div>
											<div class="show_cs_bottom">%</div>
										</li>


										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.him}</div>
											<div class="show_result">${deviceProduct.newProduct.himTip}</div>
										</li>

									</ul>
								</#if>

								<#if deviceProduct.type=="1"||deviceProduct.type=="11"||deviceProduct.type=="12"||deviceProduct.type=="16">
									<ul data-code="VOC" style="background-color:${deviceProduct.newProduct.vocColor};" >
										<li class="show_cs">
											<img src="${s.base}/mobile/img/i4.png" width=90% height=90%/>
											<div class="show_cs_top">TVOC</div>
											<div class="show_cs_bottom">mg/m³</div>
										</li>
										<li class="show_cs">
											<div class="show_value">${deviceProduct.newProduct.voc}</div>
											<div class="show_result">${deviceProduct.newProduct.vocTip}</div>
										</li>
									</ul>
								</#if>
							</div>

                        </div>
                        
                   </td>
				</tr>
                <tr >
                	<td  style="border-top:0px;">
                   		<div class="panel-body" id="chart${deviceProduct.id}" style="height: 300px;">
						</div>
                         <select data-id="${deviceProduct.id}" data-deviceId="${deviceProduct.deviceId}" data-code="" class="changeSelect">
							 <option value="day">按天统计</option>
							 <option value="year">按周统计</option>
							 <option value="month">按月统计</option>
                        </select>
                    </td>
                </tr>
				</tbody>
			</table>
		</div>
       	<!--结束-->
        </#list>
	</div>


<div id="alert_config_delete" class="ysq_alert" style="display: none;" >
	<ul>
		<li class="alert_title" style="text-align: left;padding-left: 20px;">
			温馨提示：
		</li>
		<li class="alert_title">
			<input type="hidden" class="layui-input" style="width: 80%;line-height: 28px;margin-left: 10%;"/>
			确定删除【<span id="showDeviceName"></span>】吗？
 
                        
		</li>
		<li class="alert_btn">
			<div class="alert_btn_left">
				<input type="button" onclick="deleteContent()" value="确定"/>
			</div>
			<div class="alert_btn_right">
				<input type="button" onclick="lysc()" value="取消"/>
			</div>
		</li>

	</ul>
</div>




    <script type="text/javascript" src="${s.base}/js/layui/layui.js"></script>
    <script type="text/javascript" src="${s.base}/js/base/studentMain.js"></script>
    <script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
    <script type="text/javascript" src="${s.base}/js/echart/echarts.min.js"></script>

    <script type="text/javascript">


                   function lysc() {
                       $(".ysq_alert").hide();
                      }


                //删除设备
                var productId;
                $(".deleteDevice").bind("click",function () {

                    var title=$(this).attr("data-title");
                    productId=$(this).attr("data-deviceId");
                    
                  
                    $("#showDeviceName").html(title);
                    $("#alert_config_delete").show();
                });

                function deleteContent() {
                      $.ajax({
                           type: "POST",
                           url: "/phone/deleteDevice",
                           data: {"productId":productId},
                              success: function(result){
                                if(1==result.returnInfo.state){
                                    window.location.reload();
                                 } else{

                                    alert(result.returnInfo.errorMsg);

                                 }
                               },
                             error: function(result){
                                    alert(result);
                             }
                        });
                    }



		layui.use(['layer','jquery'], function(){
		var layer = layui.layer;
		var $=layui.jquery;

		//添加设备
                $(".addDevice").bind("click",function () {
                    var title="添加设备";
                    var index = layui.layer.open({
                        title :title,
                        type : 2,
                        area: ['300px', '280px'],
                        content : "/user/addDevice",
                        success : function(layero, index){
                            var body = layui.layer.getChildFrame('body', index);
                            body.find(".closeLay").bind("click",function () {
                                layui.layer.close(index);
                            })
                        }
                    });
                });


                //设置城市
                $(".setCity").bind("click",function () {

                    var title=$(this).attr("data-title");
                    var deviceId=$(this).attr("data-deviceId");
                    var title="设备【"+title+"】设置城市";
                    var index = layui.layer.open({
                        title :title,
                        type : 2,
                        area: ['300px', '180px'],
                        content : "/user/selectDevice/"+deviceId,
                        success : function(layero, index){
                            var body = layui.layer.getChildFrame('body', index);
                            body.find(".closeLay").bind("click",function () {
                                layui.layer.close(index);
                            })
                        }
                    }); 
                });





                //初始化
                $(".changeSelect").each(function (index,elements) {
                    var id=$(elements).attr("data-id");
                    var deviceId=$(elements).attr("data-deviceId");
                    var type=$(elements).val();
                    var code=$(elements).attr("data-code");
                    if(code==null||code==""){
                        $(elements).parent().parent().parent().find(".team1 ul").each(function (index,elements) {
                            if(index==0){
                                code=$(elements).attr("data-code");
                            }
                        });
                    }
                    showEachrts(deviceId,type,code,id);
                });

				//绑定事件
				$(".changeSelect").bind("change",function () {
                    var id=$(this).attr("data-id");
                    var deviceId=$(this).attr("data-deviceId");
                    var type=$(this).val();
                    var code=$(this).attr("data-code");
                    if(code==null||code==""){
                        $(this).parent().parent().parent().find(".team1 ul").each(function (index,elements) {
							if(index==0){
							    code=$(elements).attr("data-code");
							}
                        });
					}
                    showEachrts(deviceId,type,code,id);
                });

				//click事件
                $(".team1 ul").bind("click",function () {
                    var obj=$(this).parent().parent().parent().parent().parent().find(".changeSelect");
                    var id=obj.attr("data-id");
                    var deviceId=obj.attr("data-deviceId");
                    var type=obj.val();
                    var code=$(this).attr("data-code");
                    showEachrts(deviceId,type,code,id);
                });
				function showEachrts(deviceId,type,code,id) {
                    $.post("/user/deviceEcharts",{
                        deviceId : deviceId,
                        type : type,
                        code : code,
                    },function(result){
                        var myChart = echarts.init(document.getElementById('chart'+id));
                        myChart.setOption(getOption(code,result.dataList,result.dayList,id));
                    },"json")

                }




                //图标参数
				function getOption(type,xAxisData,seriesData){
						var option={
						     title: {
						        text: type+"数据统计",
						        textStyle: {
						            color: "rgb(85, 85, 85)",
						            fontSize: 18,
						            fontStyle: "normal",
						            fontWeight: "normal"
						        }
						    },
						    tooltip: {
						        trigger: "axis"
						    },
						    toolbox: {
						        show: true,
						        feature: {
						            dataView: {
						                show: false,
						                readOnly: true
						            },
						            magicType: {
						                show: false,
						                type: ["line", "bar", "stack", "tiled"]
						            },
						            restore: {
						                show: false
						            },
						            saveAsImage: {
						                show: false
						            },
						            mark: {
						                show: false
						            }
						        }
						    },
						    calculable: false,
						    xAxis: [
						        {
						            type: "category",
						            boundaryGap: false,
						            data:xAxisData
						        }
						    ],
						    yAxis: [
						        {
						            type: "value"
						        }
						    ],
						     grid: {
						        x2: 30,
						        x: 50
						    },
						    series: [
						        {
						            name:type,
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    },
						                    color: "rgb(110, 211, 199)"
						                }
						            },
						            data: seriesData
						        }
						    ]
						};
						return option;
					}

			});



		</script>
</body>
</html>